<template>
  <div>
    <div v-for="(item, i) in data" :key="i" class="mg_t10">
      <div class="name pd_l10" @click="chose(item, data)">
        <a-icon v-if="item.isDept" type="folder" />
        <a-icon v-if="!item.isDept" type="user" />
        {{ item.name }}
        <a-icon v-if="item.isSelected" type="check" />
      </div>
      <template v-if="item.childList">
        <white-tree class="mg_l20" :data="item.childList" />
      </template>
    </div>
  </div>
</template>

<script>
export default {
  name: "WhiteTree",
  props: ["data"],
  beforeDestroy() {
    this.$eventBus.$off("whiteLists");
  },
  methods: {
    chose(item, data) {
      if (!item.isDept) {
        item.isSelected = !item.isSelected;
        this.$eventBus.$emit("whiteLists");
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.active {
  background: linear-gradient(left, #6a66f6, blue);
  color: #fff;
}
.name {
  line-height: 32px;
  &:hover {
    background: #edf1f5;
    cursor: pointer;
  }
}
</style>
